我把 GitHub 热门项目做成了海报：Claude Code + Wan 2.7 一键生成实战

来源：htmlDecode("海虎哥AI编程")

原文链接：https://mp.weixin.qq.com/s/rDz4oD47lvRodKxO--53JQ

1.前言

之前给大家写过一篇文章《 每天自动获取GitHub热门项目，这个技能包让我节省2小时！ 》，通过自动化脚本实现了 GitHub Trending 项目的每日抓取和文章生成，帮助小伙伴们快速了解开源动态。不过那时候的方案输出的是文字文章，对于想要一张可视化海报来分享的需求，还是得手动排版。有没有办法一键生成 GitHub 热门项目信息图海报呢？
阿里 Wan 2.7 模型给出了答案。Wan 2.7 是阿里推出的最新文生图模型，支持多种视觉风格和比例输出，特别适合生成信息图、海报这类内容密集型图片。今天介绍的 github-trending-wan-skill 正是结合了 GitHub Trending 抓取 + 中文翻译 + Wan 2.7 生图的完整解决方案，实现从"热门项目榜单"到"精美信息图海报"的一键转换。 阿里_Wan_2.7_202604082248
这个 skill 支持  ** 10 种视觉风格 ** （坐标蓝图、复古波普、文件夹、热敏纸、复古手帐、陶土手绘、酸性复古、剧场票据、矢量插图、孟菲斯网格），采用  ** 3 步引导式工作流 ** ，最终输出一张低信息密度、中文优先、可读性强的 3:4 信息图海报。这2天这个 skill 非常实用，今天我们手把手教大家使用这个 github-trending-wan-skill，体验和感受一下一键生成 GitHub 热门项目海报的能力。

2.项目介绍

✨ 核心特性

•  ** 🚀 一键抓取 ** ：自动获取 GitHub Trending Top 5 项目，包含 Star、语言、技术栈、README 摘要等完整元数据 •  ** 🎯 中文优先 ** ：调用 DashScope API 将英文摘要翻译为简体中文，12 个翻译模型随机选取 •  ** 🎨 10种风格 ** ：支持坐标蓝图、复古波普、文件夹、热敏纸、复古手帐、陶土手绘、酸性复古、剧场票据、矢量插图、孟菲斯网格等视觉风格 •  ** 📊 低信息密度 ** ：生成可读性强的信息图海报，避免高密度排版导致文字溢出 •  ** 🔧 3步引导式 ** ：启动询问 → 信息提取 → 确认生图，用户体验友好 •  ** 📦 输出丰富 ** ：同时生成中文简报、Wan Prompt 和最终海报图片 -🚀一键抓取：自动获取_202604082251

🛠️ 技术栈

数据抓取层

•  ** 语言 ** : Python 3.10+ •  ** 数据源 ** : GitHub Trending Web + GitHub API •  ** 解析 ** : HTML 解析 + JSON 数据提取

翻译层

•  ** API ** : DashScope 兼容 API •  ** 模型 ** : kimi-k2.5、qwen3.5-flash、glm-5 等 12 个候选模型 •  ** 策略 ** : 随机选取 + 失败重试

生图层

•  ** 模型 ** : 阿里 Wan 2.7 文生图模型 •  ** 比例 ** : 支持 3:4、16:9、9:16 等多种画幅 •  ** 分辨率 ** : 2K / 4K 可选

🎯 应用场景

•  ** 技术博主 ** ：每日 GitHub 热门项目海报，分享到公众号、小红书 •  ** 技术团队 ** ：团队内部技术动态同步，晨会分享素材 •  ** 开发者社群 ** ：微信群、Discord 社群每日技术简报 •  ** 知识库建设 ** ：持续追踪开源趋势，积累技术情报 202604082254

3.部署实战

环境准备

使用 github-trending-wan-skill 需要准备以下环境： 1.  ** Claude Code CLI ** ：已安装并配置好 Skills 目录 2.  ** DASHSCOPE_API_KEY ** ：用于翻译和 Wan 2.7 生图 3.  ** Wan-skills-main ** ：Wan 2.7 生图脚本依赖（同级目录）
项目已经开源地址：https://github.com/wwwzhouhui/skills_collection/github-trending-wan-skill
首先将 skill 文件放到 Claude Code 的 Skills 目录下：
#  Skills 目录结构
skills_collection/
├── github-trending-wan-skill/
│   ├── SKILL.md
│   ├── README.md
│   ├── scripts/
│   │   ├── fetch_daily_top10.py
│   │   ├── translate_daily_top.py
│   │   ├── build_daily_poster_assets.py
│   │   └── run_wan_generation.py
│   └── output/
└── Wan-skills-main/  # Wan 2.7 脚本依赖

配置环境变量

设置必要的环境变量：
#  设置 DashScope API Key（必须）
export DASHSCOPE_API_KEY=your-api-key

#  设置 Wan 2.7 脚本目录（可选）
export WAN_SKILL_DIR=/path/to/wan2.7-image-skill

#  GitHub Token（可选，减少 API 限流）
export GITHUB_TOKEN=your-github-token

使用方式

下面这部分我直接用 2026 年 4 月 8 日的真实操作流程来演示，这样你照着走一遍，就能清楚看到 github-trending-wan-skill 的完整执行链路。

步骤 1：启动 Skill

先在 Claude Code 对话框里输入下面这句提示词，触发 github-trending-wan-skill：
请使用github-trending-wan-skill这个skill技能帮我生成今日github上热门开源项目
这一步不是直接出图，而是先进入需求确认环节。 启动 github-trending-wan-skill
从实测过程来看，这个 skill 会先引导你补充必要参数，而不是一上来就调用生图模型。这样的好处是可以先把日期、读者、风格、分辨率、比例这些关键条件一次性确认清楚，避免后面反复返工。

步骤 2：输入需求信息

接着按照提示输入本次实战参数：
今日,科技读者,1,2k,9:16
这组参数的含义分别是： •  ** 今日 ** ：抓取当天的 GitHub Trending 数据 •  ** 科技读者 ** ：面向泛科技内容读者，而不是纯程序员受众 •  ** 1 ** ：选择第 1 种视觉风格，这里对应坐标蓝图风格 •  ** 2k ** ：输出 2K 分辨率 •  ** 9:16 ** ：适合手机端竖屏传播 输入需求参数
这一步非常关键，因为它决定了后续中文简报的表达方式，以及 Wan 2.7 生成海报时的视觉布局。

步骤 3：执行抓取、翻译与简报生成

参数确认后，skill 会自动进入处理流程。根据实测，它会按顺序完成下面 3 件事： 1. 抓取 GitHub Trending Top 5 项目 2. 将项目摘要翻译成中文 3. 生成中文简报和 Wan 生图 Prompt
实际运行界面如下： 执行 Trending 抓取与翻译
从这次实操也能看到一个很真实的问题： ** 如果本地没有正确配置  DASHSCOPE_API_KEY ，流程会在翻译/生成阶段报错。 **
也就是说，这个 skill 并不是“无脑一键跑通”，它依赖 DashScope 的能力完成中文摘要处理和后续生图调用，所以环境变量必须提前配置好。
当出现这个提示后，继续把  DASHSCOPE_API_KEY  配进去即可： 补充 DASHSCOPE_API_KEY
配置完成后重新执行，系统就会顺利产出我们需要的  ** GitHub 今日 Top 5 中文简报 ** ： 生成 Top 5 中文简报
这一段结果很有价值，因为它相当于先帮我们把“原始 Trending 数据”整理成了“可直接用于内容生产的中文素材”，后面即使不出图，单独拿这份简报去写文章、做社群播报也已经够用了。

步骤 4：继续出图并指定输出目录

确认中文简报内容没有问题后，再继续让 skill 进入生图阶段。这里我实际输入的是：
继续出图 并将输出图片输出到 export WAN_SKILL_DIR='/mnt/d/临时/2026/4月/2026年4月8日/github-trending-wan-skill'目录下 继续出图并指定目录
这里有两个重点： •  ** 继续出图 ** ：告诉 skill 前面的数据整理已经确认，可以开始调用 Wan 2.7 生成海报 •  ** 指定输出目录 ** ：方便你直接在本地找到最终图片，不用再去临时目录里翻文件
如果你希望自己手动理解这一层执行逻辑，也可以把它理解成下面这类动作：
#  设置输出目录
export WAN_SKILL_DIR='/mnt/d/临时/2026/4月/2026年4月8日/github-trending-wan-skill'

#  调用 Wan 2.7 生图
python3 scripts/run_wan_generation.py \
  --prompt output/wan_prompt.txt \
  --size 2k \
  --ratio 9:16 \
  --n 1

查看生成结果

生图完成后，先去输出目录里查看生成结果： 查看输出目录
接着打开图片，就能看到最终生成的 GitHub 热门项目信息图海报： 最终生成海报
从最终效果来看，这张图已经具备很强的“可直接传播”属性： 1.  ** 标题明确 ** ：一眼就能看出这是 GitHub 热门开源项目榜单 2.  ** 信息层次清楚 ** ：项目名称、方向、亮点都有清晰区分 3.  ** 中文可读性不错 ** ：适合公众号、社群、朋友圈等中文场景转发 4.  ** 竖版比例友好 ** ：9:16 对手机阅读和内容传播更友好
也正因为有了这套真实截图，你会发现这篇教程不再只是“原理介绍”，而是真正可以照着复现的实战流程。对于第一次接触 github-trending-wan-skill 的小伙伴来说，这样的参考价值会高很多。

4.10 种视觉风格详解

github-trending-wan-skill 支持 10 种专业视觉风格，每种风格都有独特的设计语言： 编号 风格 核心特征 适用场景 1 🧪 坐标蓝图 坐标系统 + 技术网格 技术参数、专业评测 2 📐 复古波普 瑞士网格 + 粗黑线 干货清单、对比表格 3 📁 文件夹 3D 文具 + 剪贴板 系统指南、分类清单 4 🧾 热敏纸 票据穿孔 + 3D 图标 步骤清单、时间线 5 📓 复古手帐 拼贴证据板 + 图钉 案例研究、调查分析 6 ✏️ 陶土手绘 涂鸦粗轮廓 + 几何形 轻松干货、亲和科普 7 💾 酸性复古 Y2K 像素 + 镭射渐变 数码评测、极客内容 8 🎫 剧场票据 票根胶片 + 五幕剧 故事演进、系列指南 9 🖼️ 矢量插图 黑轮廓线稿 + 几何简化 PPT 封面、场景插画 10 🎨 孟菲斯网格 可见网格 + 模块色块 高密度信息、艺术指南
** 风格速记 ** ：1 蓝 2 格 3 文件 4 票据 5 手帐 6 涂鸦 7 酸 8 剧 9 矢量 10 孟菲斯
下面给大家列举几种风格的生成的图。

1.坐标蓝图

aa0e006c-4020-450a-94b5-eebe2c39f98d_0

2.复古波普

06cf6c69-bf11-4e88-b506-0513ee1520ac_0

3.文件夹

ece86cdf-ca27-42ff-851b-c5d92374b7eb_0
时间关系后面几种就不给大家介绍了，感兴趣可以自己去下载这个skill生成。

5.输出文件说明

Skill 会生成以下输出文件： 文件 说明 内容 daily_top10.json 抓取原始数据 英文项目元数据 daily_top5_zh.json 翻译后数据 中文项目信息 daily_brief.md 中文简报 Markdown 格式简报 wan_prompt.txt Wan 2.7 Prompt 完整生图描述 github_trending_*.png 最终海报 Wan 2.7 生成图片
** 数据流程 ** ：
GitHub Trending → daily_top10.json → daily_top5_zh.json → daily_brief.md + wan_prompt.txt → 最终海报 202604082322

6.总结

今天主要带大家了解并实现了 github-trending-wan-skill 的完整使用流程，该 skill 以"GitHub Trending 抓取 + DashScope 中文翻译 + Wan 2.7 文生图"为核心优势，结合技术博主、开发团队每日技术动态同步需求，通过 Claude Code Skills 系统与 Wan 2.7 模型，形成了一套从"热门项目榜单"到"精美信息图海报"的全链路自动化解决方案。
通过这套实践方案，小伙伴们能够高效突破传统手动排版耗时耗力的痛点 —— 借助 3 步引导式工作流（包括启动询问、信息提取、确认生图），无需繁琐的图片设计和排版工作，就能快速生成一张低信息密度、中文优先、可读性强的信息图海报（如本次演示的"GitHub 今日热门开源 Top 5 坐标蓝图风格海报"）。无论是技术博主每日分享、团队内部技术同步，还是开发者社群简报推送，都能通过 Wan 2.7 的 10 种视觉风格完成，极大提升技术内容传播效率和视觉呈现质量。
在实际应用中，该 skill 不仅支持多种画幅比例（9:16 手机竖屏、3:4 公众号文章、16:9 横屏分享），还支持 12 个翻译模型随机选取确保翻译稳定性，适配性远优于传统手动截图拼接方案；特别是通过低信息密度设计理念，有效解决了信息图海报文字溢出、版面拥挤、可读性差的难题。
同时，方案具备良好的扩展性 —— 小伙伴们可以基于此扩展更多应用场景，如小红书科技笔记封面、Discord 社群每日简报、企业内部技术情报积累等，进一步发挥 Wan 2.7 文生图技术在技术内容可视化领域的应用价值。感兴趣的小伙伴可以按照文中提供的步骤进行实践，根据实际使用场景调整风格选择和比例配置。今天的分享就到这里结束了，我们下一篇文章见。
手把手教你用Wan 2.7做一个Claude Code Skill，从封面图到配音视频一键搞定
Sora关闭后，字节Seedance 2.0全球铺路！批量生成视频从此无需等待
OpenClaw的心跳30分钟才跳一次？Clawith：15秒感知世界，Agent终于有了自主意识
OpenAI 放福利了：开源维护者可免费领 6 个月 ChatGPT Pro，附完整申请攻略
#Wan   #万相妙思快闪赛   #通义实验室   #WaytoAGI